<template>
	<view class="TUI-faceMessage" @tap="previewImage">
		<image class="face-message" :src="renderDom.src"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				renderDom: [],
				percent: 0,
				faceUrl: 'https://web.sdk.qcloud.com/im/assets/face-elem/',
				info: {},
				tooltipShow: false,
				tooltipBtns: ['撤回'],
				eleId: '',
				offsetTop: 0
			};
		},

		components: {
		},
		props: {
			message: {
				type: Object,
			},
			isMine: {
				type: Boolean,
				default: true
			},
			scrollTopPage: {
				type: Number,
				default: 0
			}
		},
		watch: {
			message: {
				handler: function(newVal) {
					this.setData({
						renderDom: this.parseFace(newVal),
						info: newVal,
					});
				},
				immediate: true,
				deep: true
			}
		},
		mounted() {
		},
		methods: {
			parseFace(message) {
				const renderDom = {
					src: `${this.faceUrl + message.payload.data}@2x.png`
				};
				return renderDom;
			},
			previewImage() {
				uni.previewImage({
					current: this.renderDom[0].src,
					// 当前显示图片的http链接
					urls: [this.renderDom[0].src]
				});
			},
		},
	};
</script>
<style>
	@import "./index.css";
</style>
